<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>嫦娥送祝福！</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <style>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑";
        }
        .gameCanvas{
            position: fixed;
        }
        .clearfix{
            clear: both;
        }
        .msgGet{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        .msgGet_head{
            width: 100%;
            margin-top: 10px;
        }
        .msgGet_head img{
            width: 90%;
            margin-left:5%;
        }
        .msgGet_body{
            width: 100%;
        }
        .msgGet_body_c{
            float: left;
            width: 100%;
        }
        .msgGet_body_c img{
            width: 90%;
            margin-left:5%;
        }
        .msgGet_body_sc{
            position: absolute;
            width: 20%;
            left:10%;
        }
        .msgGet_body_sc img{
            width: 100%;
        }
        .msgGet_body_text{
            position: absolute;
            width: 100%;
            margin-top: 10%;
        }
        .msgGet_body_text_title{
            width: 40%;
            margin: 0 auto;
            height: 35px;
            line-height: 35px;
            text-align: center;
            font-size: 100%;
        }
        .msgGet_body_text_title input{
            border: none;
            width: 70%;
            height: 25px;
            line-height: 25px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 100%;
            border-radius: 5px;
            box-shadow: inset 1px 1px 1px #c0c0c0;
            -moz-box-shadow: inset 1px 1px 1px #c0c0c0;
            -o-box-shadow: inset 1px 1px 1px #c0c0c0;
            -webkit-box-shadow: inset 1px 1px 1px #c0c0c0;
        }
        .msgGet_body_text_msg{
            width: 60%;
            margin: 0 auto;
            font-size: 90%;
            overflow: hidden;
            /*12.8*/
        }
        .msgGet_body_text_msg span{
            text-indent: 2em;
            display:inline-block;
        }
        .msgGet_body_text_msg textarea{
            margin-top: 5%;
            border: none;
            resize: none;
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
            line-height: 20px;
            height: 90%;
            font-size: 90%;
            border-radius: 10px;
            box-shadow: inset 1px 1px 1px #c0c0c0;
            -moz-box-shadow: inset 1px 1px 1px #c0c0c0;
            -o-box-shadow: inset 1px 1px 1px #c0c0c0;
            -webkit-box-shadow: inset 1px 1px 1px #c0c0c0;
        }
        .msgGet_body_text_poster{
            width: 40%;
            margin: 0 auto;
            text-align: right;
            font-size: 90%;
            height: 25px;
            line-height: 25px;
            font-weight: bold;
        }
        .msgGet_body_text_poster input{
            border: none;
            font-size: 100%;
            font-weight: normal;
            width: 50%;
            height: 25px;
            text-align: right;
            line-height: 25px;
            border-radius: 5px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            box-shadow: inset 1px 1px 1px #c0c0c0;
            -moz-box-shadow: inset 1px 1px 1px #c0c0c0;
            -o-box-shadow: inset 1px 1px 1px #c0c0c0;
            -webkit-box-shadow: inset 1px 1px 1px #c0c0c0;
        }
        .msgGet_bot{
            width: 100%;
        }
        .msgGet_bot img{
            width: 40%;
            margin-left:30%;
            vertical-align: bottom;
        }
        .msgGet_text{
            color: #fff;
            width: 100%;
            text-align: center;
            font-size: 80%;
            line-height: 25px;
            text-shadow: 1px 1px 1px #000;
        }
        .msgGet_text span{
            margin-left: 5px;
            margin-right: 5px;
            font-weight: bold;
        }
        .msgGet_empty{
            width: 100%;
            height: 30px;
        }
        .footDiv{
            position: fixed;
            bottom: 0;
            height: 25px;
            width: 100%;
            background-color: rgb(0,0,0);
            text-align: center;
        }
        .footDiv_img{
            display: inline-block;
            width: 17px;
            height: 17px;
            margin-top: 4px;
        }
        .footDiv_img img{
            height: 17px;
            width: 17px;
            vertical-align: top;
        }
        .footDiv_text{
            display: inline-block;
            height: 17px;
            line-height: 17px;
            color: #fff;
            font-size: 70%;
            text-align: center;
            vertical-align: top;
            margin-top: 4px;
        }
        .footDiv_text span{
            margin-right: 5px;
        }
    </style>
</head>
<body style="padding:0; margin: 0; background: #000;">
<canvas id="gameCanvas"></canvas>
<div id="thisDiv" class="msgGet" style="display: none">
    <div class="msgGet_head"><img src="res/moonCakeImg/headImg.png"></div>
    <div class="msgGet_body">
        <div class="msgGet_body_c"><img id="bgImgBig" src="res/moonCakeImg/moon_c1.png"></div>
        <div class="msgGet_body_sc"><img id="bgImgSmall"  src="res/moonCakeImg/moon_sc1.png"></div>
        <div class="msgGet_body_text">
            <div class="msgGet_body_text_title" id="thisTitle">亲爱的李萌萌</div>
            <div class="msgGet_body_text_msg" id="thisMsg"><span>今天我化身天天的月饼君给您最美满的祝福。圆圆月亮甜甜饼，漫漫人生慢慢品。岁月漫漫细细品味最甜是朋友的问候与祝福：有道中秋际，愿全家幸福，万事圆圆！</span></div>
            <div class="msgGet_body_text_poster" id="thisPoster">--<span>嫦娥仙子</span></div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="msgGet_bot" id="thisBtn"><img onclick="goPostDiv();" src="res/moonCakeImg/sendBtn.png"></div>
    <div class="msgGet_text">已有<span>54564654</span>位送祝福</div>
    <div class="msgGet_empty"></div>
</div>
<div class="footDiv" id="footDiv" style="display: none">
    <div class="footDiv_img"><img id="footDiv_BlackImg" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3356256880,652943699&fm=58"></div>
    <div class="footDiv_text"><span>分享会</span>祝您中秋节快乐！</div>
</div>
<script src="../_public/frameworks_3_9/cocos2d-html5/CCBoot.js"></script>
<script cocos src="main.js"></script>
<script>
    //alert(window.screen.width);
    //alert(document.body.clientWidth);
    var pageFontSize = document.body.clientWidth / 320 * 16;
    //文档全局设置
    document.body.style.fontSize = pageFontSize + "px";
    document.getElementById("thisMsg").style.lineHeight = pageFontSize + 7 + "px";
    document.getElementById("thisMsg").style.height = (pageFontSize + 7)*6 + "px";

    function goPostDiv(){
        document.getElementById("thisTitle").innerHTML="<input type='text' id='thisTitle_input' placeholder='对方称呼'>";
        document.getElementById("thisMsg").innerHTML="<textarea id='thisMsg_input' placeholder='给对方的祝福语'></textarea>";
        document.getElementById("thisPoster").innerHTML="<input type='text' id='thisPoster_input' placeholder='您的称呼'>";
        document.getElementById("thisBtn").innerHTML="<img onclick='goShareDiv();' src='res/moonCakeImg/postBtn.png'>";
    }
    function goShareDiv(){
        //点击我要送祝福后
    }
    ////////////////////////////////////////////////////////////////////////////////////////////////////////
    function showPostDiv(num){

        document.getElementById("bgImgBig").src = "res/moonCakeImg/moon_c" + num + ".png";
        document.getElementById("bgImgSmall").src = "res/moonCakeImg/moon_sc" + num + ".png";

        document.getElementById("thisDiv").style.display = "block";
        document.getElementById("footDiv").style.display = "block";
    }
</script>
</body>
</html>
